<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>directive 实例</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>directive 实例</h1>
	<hr>
	<div id="app">
		<div v-jsdiy='color'>{{message}}</div>
		<div><button @click="add">add</button></div>
		<div><button onclick="unbind()">销毁</button></div>
	</div>

</body>
<script type="text/javascript">
// 自定义指令中传递的三个参数
// el: 指令所绑定的元素，可以用来直接操作DOM。
// binding: 一个对象，包含指令的很多信息。
// vnode: Vue编译生成的虚拟节点。
// Vue.directive('jsdiy',function (el,binding) {
// 	console.log(el,binding);
// 	el.style = "color:"+binding.value;
// })
function unbind() {
	app.$destroy();
}

Vue.directive('jsdiy',{
	bind:function(el,binding){//被绑定
     	console.log('1 - bind');
     	el.style = "color:"+binding.value;
	},
	inserted:function(){//绑定到节点
	    console.log('2 - inserted');
	},
	update:function(){//组件更新
	    console.log('3 - update');
	},
	componentUpdated:function(){//组件更新完成
	    console.log('4 - componentUpdated');
	},
	unbind:function(){//解绑
	    console.log('5 - unbind');
	}
})

var app = new Vue({
	el:'#app',
	data:{
		message:0,
		color:'green'
	},
	methods:{
		add:function () {
			this.message++;
		}
	}
})


</script>
</html>